<template>
  <view>
    <view>
      <uni-row  v-if="isMobile" style="padding: 10px;background: #305AF5;color: white;font-size: 1.2em;font-weight: bold">
        <uni-col :span="4"><span @click="exitApp">关闭</span></uni-col>
        <uni-col :span="16" style="text-align: center">首页</uni-col>
        <uni-col :span="4"></uni-col>
      </uni-row>
      <uni-row v-else style="padding: 10px;background: #305AF5;color: white">
        <uni-col :span="24" style="text-align: center">首页</uni-col>
      </uni-row>
      <view v-if="isMobile">
        <image style="width: 100%;height: 120rpx;" src="../static/images/index/头部背景.png"></image>
      </view>

      <view class="index-container" :style="isMobile?'':'margin-top:10px'">
        <view class="index-content">
          <uni-section title="我的待办" titleFontSize="30rpx">
            <template v-slot:decoration>
              <image class="wddbImg1" src="../static/images/index/我的待办.png"></image>
            </template>
            <template v-slot:right>
              <span @click="toIssuanceThroughList(3)">查看更多 ></span>
            </template>
            <uni-row>
              <uni-col :span="6">
                <view @click="toIssuanceThroughList(7,'wd')" class="index-article">
                  <image class="wddbImg2" src="../static/images/index/未读.png"></image>
                  <text style="margin-bottom: 5px;">未读</text>
                  <el-link  class="index-article-text" style="color: #000;">
                    {{ wdsl }}
                    <text
                        style="font-size: 30rpx;">个
                    </text>
                  </el-link>
                </view>

              </uni-col>
              <uni-col :span="6">
                <view @click="toIssuanceThroughList(7,'yd')" class="index-article">
                  <image class="wddbImg2" src="../static/images/index/未读.png"></image>
                  <text style="margin-bottom: 5px;">已读</text>
                  <el-link class="index-article-text" style="color: #000;">
                    {{ ydsl }}
                    <text
                        style="font-size: 30rpx;">个
                    </text>
                  </el-link>

                </view>
              </uni-col>
              <uni-col :span="6">
                <view  @click="toIssuanceThroughList(7,'wfk')" class="index-article">
                  <image class="wddbImg2" src="../static/images/index/未反馈.png"></image>
                  <text style="margin-bottom: 5px;">未反馈</text>
                  <el-link class="index-article-text" style="color: #000;">
                    {{ wfksl }}
                    <text
                        style="font-size: 30rpx;">个
                    </text>
                  </el-link>
                </view>
              </uni-col>
              <uni-col :span="6">
                <view @click="toIssuanceThroughList(7,'yfk')" class="index-article">
                  <image class="wddbImg2" src="../static/images/index/已反馈.png"></image>
                  <text style="margin-bottom: 5px;">已反馈</text>
                  <el-link class="index-article-text" style="color: #000;">
                    {{ yfksl }}
                    <text
                        style="font-size: 30rpx;">个
                    </text>
                  </el-link>

                </view>
              </uni-col>
            </uni-row>
          </uni-section>
        </view>
          <uni-row>
            <uni-col :span="24">
              <view class="btn" style="background-image: url('../static/images/index/下达按钮背景.png')"
                    @click="selectXdlx">
                <uni-row>
                  <uni-col :span="3">
                    <image class="index-nav-image" src="../static/images/index/下达按钮图标.png"
                           mode="aspectFill"></image>
                  </uni-col>
                  <uni-col :span="19">
                    <div style="display: inline-block;margin-left: 20px;line-height: 40rpx">
                      <p style="color: #000000;font-weight: bold">下达</p>
                      <p style="color: #414649">一键下达任务事项</p>
                    </div>
                  </uni-col>
                  <uni-col :span="2" style="padding-top: 10px">
                    <image style="display: inline-block;height: 35rpx;width: 18rpx"
                           src="/static/images/index/更多.png"></image>
                  </uni-col>
                </uni-row>
              </view>
            </uni-col>
          </uni-row>
          <uni-row style="margin-top: 10px;">
            <uni-col :span="24">
              <view class="btn" style="background-image: url('../static/images/index/反馈按钮背景.png')"
                    @click="toIssuanceThroughList(3,'wfk')">
                <uni-row>
                  <uni-col :span="3">
                    <image class="index-nav-image" src="../static/images/index/反馈按钮图标.png"
                           mode="aspectFill"></image>
                  </uni-col>
                  <uni-col :span="19">
                    <div style="display: inline-block;margin-left: 20px;line-height: 40rpx">
                      <p style="color: #000000;font-weight: bold">反馈</p>
                      <p style="color: #414649">填写反馈内容</p>
                    </div>
                  </uni-col>
                  <uni-col :span="2" style="padding-top: 10px">
                    <image style="display: inline-block;height: 35rpx;width: 18rpx"
                           src="/static/images/index/更多.png"></image>
                  </uni-col>
                </uni-row>
              </view>
            </uni-col>
          </uni-row>
        <uni-row style="margin-top: 10px;">
          <uni-col :span="24">
            <view class="btn" style="background-image: url('../static/images/index/下达按钮背景.png')"
                  @click="toIssuanceThroughList(4)">
              <uni-row>
                <uni-col :span="3">
                  <image class="index-nav-image" src="..//static/images/index/我的下达.png"
                         mode="aspectFill"></image>
                </uni-col>
                <uni-col :span="19">
                  <div style="display: inline-block;margin-left: 20px;line-height: 40rpx">
                    <p style="color: #000000;font-weight: bold">我的下达</p>
                    <p style="color: #414649">我下达的文件</p>
                  </div>
                </uni-col>
                <uni-col :span="2" style="padding-top: 10px">
                  <image style="display: inline-block;height: 35rpx;width: 18rpx"
                         src="/static/images/index/更多.png"></image>
                </uni-col>
              </uni-row>
            </view>
          </uni-col>
        </uni-row>
        <view class="index-content" style="margin-top: 20px;">
          <uni-section title="最近文件" titleFontSize="30rpx">
            <template v-slot:decoration>
              <image class="wddbImg1" src="../static/images/index/最近文件.png"></image>
            </template>
            <template v-slot:right>

            </template>
            <el-table :show-header="false" @row-click="rowClick" :data="fkxxList" style="width: 100%;min-height: 490rpx" v-show="isMobile">
              <el-table-column align="left" prop="sxbt"></el-table-column>
              <el-table-column align="right" prop="xdrq"></el-table-column>
            </el-table>
            <el-table @row-click="rowClick" :data="fkxxList" style="width: 100%;min-height: 490rpx" v-show="!isMobile">
              <el-table-column align="center" label="事项标题" prop="sxbt" ></el-table-column>
              <el-table-column align="center" label="下达日期" prop="xdrq" ></el-table-column>
              <el-table-column align="center" label="是否反馈" prop="sffk">
                <template slot-scope="scope">
                  <div>{{scope.row.sffk==1?'是':'否'}}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="状态" prop="zt" >
                <template slot-scope="scope">
                  <div>{{scope.row.zt==1?'未读':scope.row.zt != 3?'未反馈':scope.row.zt==3?'已反馈':''}}</div>
                </template>
              </el-table-column>
            </el-table>
          </uni-section>
        </view>
      </view>
<!--      <view style="text-align: center" class="action-btn fixed-bottom" v-show="isMobile">-->
<!--        <el-button style="border: solid #8ebbfa 5rpx;color: #0d6aff;width: 300rpx" @click="exitApp" round>返回上一级</el-button>-->
<!--      </view>-->
    </view>
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog ref="inputClose" mode="input" title="选择下达类型" value="对话框预置提示内容!"
                        placeholder="请选择下达类型"
                        @confirm="toIssuanceThroughList(xdlx)">
        <uni-forms-item>
          <uni-data-checkbox v-model="xdlx" :localdata="xdlxs"/>
        </uni-forms-item>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {
  getFkxxByUserId,
  queryUserByUsername,
  getMyToDo,
  getLoginUserInfoByAppToken,
  loginByToken
} from "@/api/system/yjgl";
import {
  setApptoken,
  getApptoken,
  setUserId,
  setDeptId,
  setIsleader,
  setUsername,
  getUsername,
  setToken, getUserId
} from '@/utils/auth';
import app from "@/App.vue";
import {
  getAppRwPage,
  addApptoken,
  getMySendMatter, getSxlxCountData, getXdbmCount
} from "@/api/system/xdwj";

export default {
  name: "index",
  data() {
    return {
      wdsl:0,
      wfksl:0,
      yfksl:0,
      ydsl:0,
      chartData: {},
      chartData1: {},
      chartData2: {},
      opts: {
        rotate: false,
        rotateLock: false,
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [5, 5, 5, 5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: true,
          position: "right",
          lineHeight: 25
        },
        extra: {
          ring: {
            ringWidth: 60,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        },

      },
      windowWidth: 0,
      opts1: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        },
      },
      opts2: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [15, 30, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          boundaryGap: "justify",
          disableGrid: false,
          min: 0,
          axisLine: false,
          max: 70
        },
        yAxis: {},
        extra: {
          bar: {
            type: "stack",
            width: 30,
            meterBorde: 1,
            meterFillColor: "#FFFFFF",
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            categoryGap: 2
          }
        }
      },
      isMobile: false,
      xdlx: 1,
      xdlxs: [{
        value: 1,
        text: '一键直达'
      }, {
        value: 2,
        text: '逐级下达'
      }],
      fkxxList: [],
      rwbId: "",
      recentlyRw: {},
      pageParams: {
        username: getUsername(),
        total: 0,
        page: 1,
        limit: 1,
      },
      cggzCount: 0,
      yjygCount: 0,
      tfsjCount: 0,
      cggzCsCount: 0,
      yjygCsCount: 0,
      tfsjCsCount: 0,
    };
  },

  onLoad(option) {
    // alert(JSON.stringify(option));
    //  进入页面的时候执行一次
    uni.getSystemInfo().then(res => {

      const windowWidth = res[1].windowWidth; // 窗口宽度
      // console.log(windowWidth)
      // const windowHeight = res.windowHeight; // 窗口高度
      this.windowWidth = windowWidth
      if (windowWidth > 768) {
        // uni.hideTabBar()
        document.getElementsByClassName('uni-page-head')[0].style.display = 'none'
      } else {
        // uni.showTabBar()
        document.getElementsByClassName('uni-page-head')[0].style.display = 'block'
      }
      // console.log(this.windowWidth)
    })
    let appToken = option.appToken;
    if (appToken) {
      setApptoken(appToken); // 存储appToken
      // 根据appToken获取用户信息
      loginByToken({
        appToken: getApptoken()
      }).then(res => {
        setToken(res.token);
        if (res.code) {
          setUserId(res.data.userId);
          setDeptId(res.data.departMentId);
          setIsleader(res.data.isleader);
          setUsername(res.data.username)
          this.getList(res.data.userId);
          this.addApptoken();
          this.getMyToDo();
          this.toFkxxPage(option);
          // this.getAppRecentlyRw();
        }
      })
    }
    this.isMobile = window.innerWidth < 600;
    window.addEventListener('resize', () => {
      this.isMobile = window.innerWidth < 600;
    });
  },
  onShow() {
    this.getList(getUserId());
    this.getMyToDo();
    // this.getServerData();
    // this.getServerData1();
    // this.getServerData2();
    // this.getMySendMatter();
    // this.getSxlxCountCs();
    // this.getAppRecentlyRw();
    //进入页面不触发获取数据  改变的时候触发
    const windowResizeCallback = (res) => {
      this.windowWidth = res.size.windowWidth
      // console.log('变化后的窗口高度=' + res.size.windowHeight)
    }
    uni.onWindowResize(windowResizeCallback)


  },
  methods: {
    toFkxxPage(option){
      if (option.isTz) {
        uni.navigateTo({
          url: `/pages/ckRwxx?rwbId=${option.rwbId}&isTz=${option.isTz}&ly=${option.ly}`
        });
      }
    },
    rowClick(row){
      let url = "";
      if (row.zt == 3){// 跳查看任务页面
        url = `/pages/work/ckRwxx?fkId=${row.sid}&workid=${row.workid}&ly=${row.ly}`;
      }else {// 跳反馈任务页面
        url = `/pages/ckRwxx?fkId=${row.sid}&workid=${row.workid}&ly=${row.ly}`;
      }
      uni.navigateTo({
        url: url // 假设你要跳转的页面路径为/pages/target/target
      });
      console.log(row);
    },
    getMyToDo(){
      // 获取我的待办数量
      getMyToDo({userId:getUserId()}).then(res=>{
        if (res.data){
          this.wdsl = res.data.wdsl;
          this.wfksl = res.data.wfksl;
          this.yfksl = res.data.yfksl;
          this.ydsl = res.data.ydsl;
        }

      })
    },
    getServerData() {
      getSxlxCountData({isCq: '1'}).then(res1 => {
        let res = {
          series: [
            {
              // data: [{"name":"常规工作","value":this.cggzCsCount},{"name":"预警预告","value":this.yjygCsCount},{"name":"突发事件","value":this.tfsjCsCount}]
              data: res1.data,
            }
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      })
    },
    getServerData1() {
      //模拟从服务器获取数据时的延时
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      getXdbmCount().then(res1 => {
        let counts = res1.data.map(m => m.count);
        let deptNames = res1.data.map(m => m.deptName);
        let res = {
          categories: deptNames,
          series: [
            {
              name: "下达数量",
              data: counts
            }
          ]
        };
        this.chartData1 = JSON.parse(JSON.stringify(res));
      })
    },
    getServerData2() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: ["长春市", "吉林市", "四平市", "辽源市", "通化市", "白山市", "松原市", "白城市", "延边市", "长白山", "梅河口"],
          series: [
            {
              name: "反馈数量",
              data: [35, 36, 31, 33, 13, 34, 11, 12, 13, 14, 15]
            },
          ]
        };
        this.chartData2 = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    addApptoken() {
      addApptoken({
        appToken: getApptoken(),
        userName: getUsername()
      });
    },
    selectXdlx() {
      // this.xdlx = 1;
      // this.$refs.inputDialog.open();
      this.toIssuanceThroughList(1)    },
    exitApp() {
      var opt = {
        data: '', //回传给上一个页面的参数（字符串），没有则不传
        success: function (data) {
        },
        fail: function (data) {
        }
      }
      //插件调用代码
      WorkHelper.closeApp(opt);
    },
    getUrlParam(url) {
      const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;
      const params = {};
      let match;
      while (match = paramsRegex.exec(url)) {
        params[match[1]] = match[2];
      }
      return params;
    },
    //访问微信地址，用来获取code
    getWeChatCode() {
      //通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
      let redirect_uri = encodeURIComponent(window.location.href)
      window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww7555960e312add1f&redirect_uri=" +
          redirect_uri + "&response_type=code&scope=snsapi_base&state=STATE&agentid=AGENTID#wechat_redirect"
    },
    // 企业微信登录
    async wxLogin(code) {
      this.$modal.loading("登录中，请耐心等待...")
      this.$store.dispatch('WxLogin', code).then(() => {
        this.$modal.closeLoading()
      })
    },
    onClick(e) {
    },
    getList(userId) {
      getFkxxByUserId({
        userId,'type':''
      }).then(res => {
        this.fkxxList = res.data.slice(0, 5);
      })
    },
    toIssuanceThroughList(index, type) {
      let username = getUsername();
      let _this = this;
      queryUserByUsername({
        username: username
      }).then(res => {
        if (res.code === 200) {
          let url = "";
          // 使用uni.navigateTo跳转到目标页面
          if (index == 1) {// 一键直达
            url = '/pages/home/through/issuanceAdd'
          }
          if (index == 2) {// 逐级下达
            url = '/pages/home/step/issuanceList'
          }
          if (index == 3) {// 反馈
            url = '/pages/index-bak?type='+type
          }
          if (index == 4) {
            url = '/pages/home/through/issuanceList?myMatter=1'
          }
          if (index == 5) {
            if (!_this.recentlyRw.sid) {
              return;
            }
            url = '/pages/home/through/ckRwxx?sid=' + this.recentlyRw.sid
          }
          if (index == 6) {
            url = '/pages/home/through/issuanceList?isCq=1'
          }
          if (index == 7) {
            url = '/pages/index-bak?type=' + type;
          }
          uni.navigateTo({
            url: url // 假设你要跳转的页面路径为/pages/target/target
          });
        }
      })
    },
    getAppRecentlyRw() {
      getAppRwPage(this.pageParams).then(res => {
        if (res.rows.length > 0) {
          this.recentlyRw = res.rows[0];
        } else {
          this.recentlyRw = {xdsl: 0, wdsl: 0, yfk: 0, wfk: 0};
        }
      })
    },
    getMySendMatter() {
      getMySendMatter({}).then(res => {
        if (res.data) {
          let data = res.data;
          for (let i = 0; i < data.length; i++) {
            if (data[i].sxlx == 1) {
              this.cggzCount = data[i].count;
            }
            if (data[i].sxlx == 2) {
              this.yjygCount = data[i].count;
            }
            if (data[i].sxlx == 3) {
              this.tfsjCount = data[i].count;
            }
          }
        }
      })
    },
    // getSxlxCountCs() {
    // 	getSxlxCount({
    // 		isCq: '1'
    // 	}).then(res => {
    // 		if (res.data) {
    // 			let data = res.data;
    // 			for (let i = 0; i < data.length; i++) {
    // 				if (data[i].sxlx == 1) {
    // 					this.cggzCsCount = data[i].count;
    // 				}
    // 				if (data[i].sxlx == 2) {
    // 					this.yjygCsCount = data[i].count;
    // 				}
    // 				if (data[i].sxlx == 3) {
    // 					this.tfsjCsCount = data[i].count;
    // 				}
    // 			}
    // 		}
    // 	})
    // },
  }
}
</script>

<style>
page {
  background-color: #F6F6F6;
}

.button-3d-1 {
  position: relative;
  background: rgb(48, 90, 245);
  border: none;
  color: white;
  padding: 15px 24px;
  font-size: 27rpx;
  outline: none;
  box-shadow: 4px 4px 0 hsl(0, 4%, 73%);
}

.index-container {
  margin: 30rpx;
  z-index: 9;
  margin-top: -100rpx;
  position: sticky;
}

.index-content {
  background-color: white;
  padding: 20rpx;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin-bottom: 30rpx;
}

.index-content1 {
  background-color: white;
  padding: 20rpx;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin-bottom: 10rpx;
}

.index-nav {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.index-nav-image {
  height: 75rpx;
  width: 75rpx;
  display: inline-block;
}

.index-article {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.index-article-text {
  font-size: 55rpx;
  margin-bottom: 10rpx;
}

.wddbImg1 {
  width: 25px;
  height: 20px;
  margin-right: 10px;
}
.wddbImg2 {
  width: 150px;
  height: 120px;
}

@media screen and (max-width: 768px) {
  .wddbImg1 {
    width: 5%;
    height: 24rpx;
    margin-right: 10px;
  }
  .wddbImg2 {
    width: 50%;
    height: 100rpx;
  }
}


.btn {
  background-size: cover;
  height: 140rpx;
  width: 100%;
  border-radius: 10px;
  padding: 30rpx;
  position: relative;
  color: #fff;
  text-align: center;
  text-align: left;
}

</style>
